<template>
<div>
  <el-button type="text" @click="add">添加</el-button>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="id"
        label="id"
        width="150">
    </el-table-column>
    <el-table-column
        prop="bt"
        label="标题"
        width="120">
    </el-table-column>
    <el-table-column
        prop="pic"
        label="pic"
        width="120">
      <template >

      </template>
    </el-table-column>
    <el-table-column
        prop="flId"
        label="分类"
        width="120">
    </el-table-column>
    <el-table-column
        prop="sffb"
        label="是否发布"
        width="300">
    </el-table-column>
    <el-table-column
        prop="lls"
        label="浏览数"
        width="120">
    </el-table-column>
    <el-table-column
        prop="fbsj"
        label="发布时间"
        width="120">
    </el-table-column>
    <el-table-column
        prop="zy"
        label="摘要"
        width="120">
    </el-table-column>
    <el-table-column
        prop="nr"
        label="内容"
        width="120">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @current-change="goPage"
      :page-size="3"
      layout="total, prev, pager, next"
      :total="total">
  </el-pagination>
  <el-dialog title="添加" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="标题" :label-width="formLabelWidth" prop="bt">
        <el-input v-model="form.bt" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" :label-width="formLabelWidth" prop="flId">
        <el-select v-model="form.flId" placeholder="分类">
          <el-option v-for="f in cds" :label="f.id" :value="f.name" v-bind:key="f.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="摘要" :label-width="formLabelWidth" prop="zy">
        <el-input v-model="form.zy" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="内容" :label-width="formLabelWidth" prop="nr">
        <el-input v-model="form.nr" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addup">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
name: "GoodsView",
  data(){
  return{
    cds:[],
    form:{},
    tableData:[],
    total:0,
    pageNum:1,
    dialogTableVisible: false,
    dialogFormVisible: false,
    formLabelWidth: '120px',
    rules: {
      bt: [
        {required: true, message: '请输入标题', trigger: 'blur'},
      ],
      flId: [
        {required: true, message: '请选择分类', trigger: 'blur'},
      ],
      zy: [
        {required: true, message: '请输入摘要', trigger: 'blur'},
      ],
      nr: [
        {required: true, message: '请输入内容', trigger: 'blur'},
      ],
    }
  }
  },methods:{
    addup(){
      this.axios.post("goods/addup",this.form).then(res=>{
        if(res.data.code==200){
          this.form=res.data.data;
          this.$message.success("添加成功");
          this.list();
        }else {
          this.$message.error("添加失败")
        }
      })
    },
    flId(){
      this.axios.post("goods/flId").then(res=>{
        this.cds=res.data.data;
      })
    },
    add(){
    this.dialogFormVisible=true;
    },
    goPage(page){
      this.pageNum=page;
      this.list();
    },
      list(){
        this.axios.post("goods/list?pageNum="+this.pageNum).then(res=>{
          this.tableData=res.data.data.list;
          this.total=res.data.data.total;
        })
      }
  },created() {
    this.list();
    this.flId();
  }
}
</script>

<style scoped>

</style>